<template>
  <div class="goods">
    <ul class="listgoods">
      <li class="goodsnr" v-for="good in goods4" :key="good.goodsId">
        <div class="goodsnr_">
          <img :src="good.goodsimg" class="img" />
          <div class="flexxx">
            <h4>
              {{ good.goodsname }}
            </h4>
            <p>颜色：无</p>
            <p class="goodsnr_1">
              <span class="prices">￥{{ good.goodsprice }}</span
              ><span>X{{ good.count }}</span>
            </p>
          </div>
        </div>
        <input
          type="text"
          class="ipt_"
          placeholder="给商家留言(45字内)"
          maxlength="45"
        />
      </li>
    </ul>
    <div class="xiaoji">
      <p>
        小计：<span>￥{{ Money }}</span>
      </p>
    </div>
    <div class="_price">
      <p>
        <span>商品金额</span><span class="jiage">￥{{ Money }}</span>
      </p>
      <p>
        <span>总费用</span><span class="jiage">￥{{ Money }}</span>
      </p>
    </div>
    <div class="dibu">
      <p>
        应付:<span style="font-size: 0.25rem; color: rgb(191, 17, 17)"
          >￥{{ Money }}.00</span
        >
        <span>免运费</span>
      </p>
      <p @click="showPopup">提交订单</p>
    </div>
    <van-popup v-model="show"
      ><h3>订单总额：{{ Money }}元</h3>
      <img src="img/YL/fukuan.jpg" class="img2"
    /></van-popup>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      goods4: [],
      Money: 0,
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
  created() {
    axios.get("/gwc").then((res) => {
      console.log(this.$store.state);
      for (let v in this.$store.state.gwc.goodsid) {
        res.data.forEach((good) => {
          if (good.goodsId === v) {
            good.count = this.$store.state.gwc.goodsid[v];
            this.goods4.push(good);
          }
        });
      }
      // this.goods4=res.data
      console.log(this.$route.query);
      let money = 0;
      this.goods4.forEach((good) => {
        money += good.count * good.goodsprice;
      });
      this.Money = money;
    });
  },
};
</script>

<style scoped>
.flexxx {
  flex: 1;
}
.goods {
  width: 100%;
}
.ul {
  width: 100%;
}
.goodsnr {
  width: 100%;
  height: 1.5rem;
  box-sizing: border-box;
  padding: 0.1rem 0.1rem 0.1rem;
  background-color: #f9f9f9;
}
.img {
  width: 0.6rem;
  height: 0.6rem;
  border: 0.01rem solid #ccc;
  margin-right: 0.1rem;
}
.goodsnr_ {
  width: 100%;
  display: flex;
  font-size: 0.13rem;
  margin-bottom: 0.1rem;
}
.goodsnr_1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
}
.goodsnr_ h4 {
  margin-bottom: 0.05rem;
  font-size: 0.15rem;
  font-weight: normal;
}
.prices {
  color: #f60;
}
.ipt_ {
  background: #fff;
  font-size: 0.14rem;
  line-height: 0.3rem;
  height: 0.3rem;
  border: 0.01rem solid #dfdfdf;
  padding: 0 0.1rem;
  width: calc(100% - 0.2rem);
  border-radius: 0.04rem;
}
.xiaoji {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  box-sizing: border-box;
  padding: 0 0.14rem;
  border-bottom: 0.1rem solid #f9f9f9;
}
.xiaoji p {
  float: right;
}
.xiaoji p span {
  color: #f60;
  margin-left: 0.14rem;
}
._price {
  width: 100%;
  box-sizing: border-box;
}
._price p {
  width: 100%;
  height: 0.4rem;
  box-sizing: border-box;
  padding: 0.1rem 0.14rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.04rem solid #f9f9f9;
  font-size: 0.14rem;
}
._price p .jiage {
  color: #f60;
}
/* 底部 */
.dibu {
  width: 100%;
  height: 0.55rem;
  position: fixed;
  bottom: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
}
.dibu p:nth-child(1) {
  line-height: 0.55rem;
}
.dibu p:nth-child(2) {
  background-color: rgb(191, 17, 17);
  color: white;
  border-radius: 0.24rem;
  width: 1.26rem;
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  margin-top: 0.03rem;
}
h3 {
  margin-left: 0.2rem;
}
.img2 {
  width: 100%;
  height: 100%;
}
</style>